<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考试信息系统</title>
	</head>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<style>
		#head{
			width: 18%;
			height: 100%;
			display: flex;
			position: absolute;
			left: 0;
			background-color: #c2c2c2;
			padding: 2rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex-direction: column;
		}
		p{
			font-size: 2.5rem;
		}
		#body{
			width: 82%;
			height: 100%;
			display: flex;
			position: absolute;
			right: 0;
			padding: 3rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex-direction: column;
		}
		input{
			margin-bottom: 2.5rem;
		}
		h3{
			margin-top: 0;
			margin-bottom: 3rem;
			text-align: center;
		}
	</style>
	<body>
		<div>
			<div id="head">
				<h3>学生端</h3>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<p>账号：211806364</p>
					<p>姓名：蔡新阳</p>
					<p>专业：软件工程</p>
				</div>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<br>
					<p style="text-align: center;margin-bottom: 3.125rem;">查询</p>
					<button type="button" class="btn btn-primary btn-lg btn-block" onclick="getData(2)">全部考试</button>
					<button type="button" class="btn btn-primary btn-lg btn-block" onclick="getData(0)">即将开始</button>
					<button type="button" class="btn btn-primary btn-lg btn-block" onclick="getData(1)">已结束</button>
					<br>
				</div>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<br>
					<p style="text-align: center;margin-bottom: 3.125rem;">按时间查询</p>
					<form id="selectTime"> 
						<input type="date" class="form-control btn-lg btn-block" name="time"/>
						<button type="button" class="btn btn-primary btn-lg btn-block" onclick="selectTime()">查询</button>
					</form>
					<br>
				</div>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<br>
					<p style="text-align: center;margin-bottom: 3.125rem;">按名称查询</p>
					<form id="selectName">
						<input type="text" class="form-control btn-lg btn-block" placeholder="输入课程名称" name="name"/>
						<button type="button" class="btn btn-primary btn-lg btn-block" onclick="select()">查询</button>
					</form>
					<br>
				</div>
			</div>
			<div id="body">
				<table class="table table-bordered">
				  <h2 style="margin: 0 auto;margin-bottom: 3.125rem;">考试详情</h2>
				  <thead>
				    <tr>
				      <th>考试班级</th>
				      <th>考试科目</th>
				      <th>考试时间</th>
					  <th>考试地点</th>
					  <th>监考老师</th>
				    </tr>
				  </thead>
				  <tbody id="detail">
				    
				  </tbody>
				</table>
			</div>
		</div>
		<script>
			//初始化界面数据
			window.onload=function(){
				getData(2);
			}

			// 获取数据
			function getData(value){
				$.ajax({
						url:'getDataStu.php',
						type:'post',
						data:{check:value},
						success:function(msg){
							document.getElementById("detail").innerHTML = msg;
							//alert("链接数据库成功。");
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}

			//模糊查询
			function select(){
				$.ajax({
						url:'selectStu.php',
						type:'post',
						data: $('#selectName').serialize(),
						success:function(msg){
							//alert("链接数据库成功。");
							document.getElementById("detail").innerHTML = msg;
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}

			//模糊查询(时间)
			function selectTime(){
				$.ajax({
						url:'selectStuTime.php',
						type:'post',
						data: $('#selectTime').serialize(),
						success:function(msg){
							//alert("链接数据库成功。");
							document.getElementById("detail").innerHTML = msg;
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}
		</script>
	</body>
</html>
